<template>
  <div ref="container">
    <div class="flex justify-between items-center mb-2">
      <div class="flex items-center group">
        <!-- <i
          class="text-[20px] w-[20px] h-[20px] flex items-center mr-2 text-[#b1bad3]"
          v-html="details.icon"
        ></i> -->
        <img
          :src="main.static_base_url + details.icon"
          class="menu-hover-img mr-[4px]"
          alt=""
        />
        <h2
          class="text-sm sm:text-md lg:text-lg font-bold group-hover:text-white text-[#b1bad3]"
        >
          {{ details.name }}
        </h2>
      </div>
      <div class="pagination">
        <div class="mr-1 rounded_btn" @click="gameDetil(details)">
          {{ $t("page.casino.all") }}
        </div>
        <div>
          <button
            :class="{ disabled: currentPage === 1 }"
            @click="prevPage"
            :disabled="currentPage === 1"
          >
            <van-icon style="font-size: 12px" name="arrow-left" />
          </button>
          <button
            :class="{ disabled: currentPage === totalPages }"
            @click="nextPage"
            :disabled="currentPage === totalPages"
          >
            <van-icon style="font-size: 12px" name="arrow" />
          </button>
        </div>
      </div>
    </div>
    <div class="flex container gameBox pt-4 mb-4">
      <div
        v-for="(game, index) in paginatedGames"
        :key="index"
        class="item relative"
      >
        <div class="hover-img">
          <div
            @click="
              clickGame(game.link_url);
              addRecent(game);
            "
            class="game_loading_div"
            :style="'background-image:url(' + game.img_url + ')'"
          ></div>
          <div class="mb absolute w-full rounded h-[30%] top-[-2px] left-0" />
          <div
            class="absolute top-2 right-2 cursor-pointer star"
            @click="clickStar(game)"
          >
            <svg-icon
              v-if="game.is_collect == 0"
              class="text-[28px] text-white star1"
              name="星星1"
            />
            <svg-icon
              v-else
              class="text-[28px] text-white star2"
              name="星星2"
            />
          </div>
        </div>
        <div class="flex items-center mt-2">
          <div
            class="greenpoint w-[6px] h-[6px] rounded-full bg-[#1fff20]"
          ></div>
          <div class="flex text-white text-xs ml-2">
            {{ game.play_num }}
            <span class="ml-1 text-[#b1bad3]">{{
              $t("page.casino.inplay")
            }}</span>
          </div>
        </div>
        <!-- <p>{{ game.name }}</p> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  createApp,
  ref,
  computed,
  onMounted,
  onBeforeUnmount,
  nextTick,
  getCurrentInstance
} from "vue";
import { gameCollect, gameCollectList } from "../../api/casion";
import { mainAct } from "../../store/activeda";
import { mainNav } from "@/store/nav";
import { useRouter, useRoute } from "vue-router";
import { eventBus } from "@/utils/eventBus";
import { gameDetail } from "@/store/game";

const game = gameDetail();
const router = useRouter();
const route = useRoute();
const main = mainNav();
const main2 = mainAct();
const props = defineProps({
  details: {
    type: Object,
    default: {
      name: "22",
      icon: "22",
      type: "dz",
      lang_key: "",
      is_lobby: 1,
      game_list: [],
      category_id: 19
    }
  }
});

const items = ref([]);
const divWidth = 160;
const maxDivs = 3; // 移动端最大显示3个 div
const container = ref(null);
const currentPage = ref(1);
const itemsPerPage = ref(3); // Adjust this value based on your layout
const totalPages = computed(() =>
  Math.ceil(props.details.game_list.length / itemsPerPage.value)
);

const paginatedGames = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value;
  const end = start + itemsPerPage.value;
  return props.details.game_list.slice(start, end);
});

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};
const calculateItems = () => {
  // console.log(container.value);
  const containerWidth = container.value.clientWidth;
  const isMobile = window.innerWidth <= 600; // 假设屏幕宽度小于等于 600px 则为移动端
  itemsPerPage.value = isMobile
    ? maxDivs
    : Math.floor(containerWidth / divWidth);
  // console.log(itemsPerPage.value);
  // console.log(containerWidth / divWidth);
  items.value = Array.from({ length: itemsPerPage.value }, (_, index) => index);
};

// 监听窗口宽度变化
const handleResize = () => {
  calculateItems();
};
const addRecent = game => {
  //   console.log(game);
  main2.recentList.unshift(game);
  main2.currentGame = game;
  //去重
  main2.recentList = main2.recentList.filter(
    (value, index, self) => index === self.findIndex(t => t.id === value.id)
  );

  //大于35条 删除后面的
  if (main2.recentList.length > 35) {
    main2.recentList.splice(35, main2.recentList.length - 35);
  }
};

const clickGame = url => {
  if (!main2.isLogin) {
    if (main2._isMobile) {
      router.push("/login");
    } else {
      main2.showLoginLayer("no");
    }
    return;
  }
  const matchLoginGame = url.match(/login_game/g);
  const loginGame = matchLoginGame ? matchLoginGame[0] : "";
  const matchGameCode = url.match(/game_code=[^&]*/);
  const gameCode = matchGameCode ? matchGameCode[0].split("=")[1] : "";
  if (loginGame != "") {
    game.gameLogin(gameCode, router);
    return;
  }
};
const clickStar = async e => {
  console.log(e.code);
  let data = {
    game_code: e.code
  };
  let res = await gameCollect(data);
  console.log(res);
  if (res.errno == 0) {
    //请求收藏夹列表
    // getList();
    if (e.is_collect == 1) {
      e.is_collect = 0;
    } else {
      e.is_collect = 1;
    }
  }
};

const gameDetil = item => {
  console.log("details", item);
  router.push("gameDetails");
  eventBus.emit("changeActiveTab", item.category_id);
};

onMounted(async () => {
  await nextTick();
  calculateItems();
  window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
</script>
<style lang="less" scoped>
.container {
  overflow: hidden;
  // .icon {
  //   max-width: 20px !important;
  //   max-height: 20px !important;
  // }
}

@media (max-width: 600px) {
  .game-card {
    width: 30% !important;
    max-width: unset;
  }

  .banner {
    height: 80px !important;
    line-height: 80px !important;
  }

  .gameBox {
    grid-gap: 10px 5px !important;
    grid-template-columns: repeat(3, 1fr) !important;

    .item {
      width: 28vw !important;
      max-width: unset;
      min-width: unset;
    }
    .game_loading_div {
      width: 28vw !important;
      height: 40vw !important;
    }
    .star {
      display: block !important;
    }
    .mb {
      opacity: 1 !important;
    }
  }
}

.game-card:hover {
  // transform: translateY(-4%);
}

.game-card {
  max-width: 200px;
  width: 200px;
  height: 250px;
  cursor: pointer;
  background-color: #667386;
  border-radius: 10px;
  /* padding: 20px; */
  text-align: center;
  margin: 10px;
  /* flex: 1 0 21%; Adjust the flex-basis to control the number of items per row */
  position: relative;
  will-change: transform;
  transition: 0.3s;

  .game-card-con {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    img {
      width: auto;
      min-width: 200px;
      border-radius: 10px;
    }

    p {
      margin-top: 10px;
      color: #ffffff;
    }

    .players {
      color: #00ff00;
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  // margin-top: 20px;
}

.pagination button {
  background-color: #1c2a38;
  color: #ffffff;
  border: none;
  padding: 6px 20px;
  margin: 0;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #2f4453;
}

.pagination button:first-child {
  margin-right: 0;
  border-radius: 20px 0 0 20px;
  border-right: 0;
}

.pagination button:last-child {
  margin-left: 0;
  border-radius: 0 20px 20px 0;
}

.pagination button.disabled {
  background-color: #1a2c38;
  color: #667386;
  cursor: not-allowed;
}

.gameBox {
  background-color: #1a2c38;
  display: grid;
  grid-gap: 2rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  .hover-img {
    will-change: transform;
    transition: 0.3s;
  }

  .item .game_loading_div {
    width: 157px;
    color: #fff;
    height: 216px;
    cursor: pointer;
    background-color: #213743;
    text-align: center;
    line-height: 216px;
    border-radius: 4px;
  }
  .star {
    display: none;
  }
  .mb {
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(48, 48, 48, 0.9) 100%
    );
  }
  .item:hover .hover-img {
    transform: translateY(-4%);
    .star {
      display: block;
      z-index: 12;
    }
    .mb {
      opacity: 1;
      transition-duration: 1s;
      transition-property: opacity;
      z-index: 11;
    }
  }
}
.greenpoint {
  animation: svelte-tgp09d-pulse 1s infinite ease-out;
}
@keyframes svelte-tgp09d-pulse {
  0% {
    box-shadow: 0 0 #00e70166;
  }
  30% {
    box-shadow: 0 0 2px 2px #00e70166;
  }
  70% {
    box-shadow: 0 0 2px 2px #00e70166;
  }
  100% {
    box-shadow: 0 0 #00e70166;
  }
}
.menu-hover-img {
  width: 28px;
}

.menu-hover-img:hover {
  filter: brightness(200%); /* 增加亮度来实现高亮效果 */
  transition: filter 0.1s ease; /* 平滑过渡效果 */
}

.rounded_btn {
  padding: 8px 18px;
  border: 1px solid #2d4251;
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
}

@media (max-width: 600px) {
  .pagination button {
    background-color: #1c2a38;
    color: #ffffff;
    border: none;
    padding: 3px 12px;
    margin: 0;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #2f4453;
  }

  .rounded_btn {
    padding: 4px 12px;
    border: 1px solid #2d4251;
    color: #fff;
    font-size: 14px;
    border-radius: 20px;
  }

  .menu-hover-img {
    width: 20px;
  }
}
</style>
